<template>
  <Section padding="0 2rem 0 0rem">
    <GapedColumn gap="middle">
      <page-header title="分析配置" icon="document"> </page-header>
      <el-card header="业务" shadow="hover" style="flex: 1">
        <BusinessMaintenance @click="handleBusinessChanged" />
      </el-card>
      <el-card header="集群" shadow="hover" style="flex: 1">
        <ClusterManagement />
      </el-card>
      <el-card header="告警规则" shadow="hover" style="width: 100%">
        <ConditionMaintenance />
      </el-card>
      <el-card header="节点维护" shadow="hover" style="width: 100%">
        <NodeMaintenance />
      </el-card>
    </GapedColumn>
  </Section>
  <TopoConfigDialog ref="topoDialog" :business-name="selectedBusinessName" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageHeader from '@/components/layout/PageHeader.vue'
import { Section, GapedColumn } from '@/core/components'
import BusinessMaintenance from '@/components/topo/BusinessMaintenance.vue'
import NodeMaintenance from '@/components/topo/NodeMaintenance.vue'
import ConditionMaintenance from '@/components/topo/ConditionMaintenance.vue'
import ClusterManagement from '@/components/topo/ClusterManagement.vue'
import TopoConfigDialog from '@/components/topo/TopoConfigDialog.vue'

const topoDialog = ref(null)

const handleBusinessChanged = businessName => {
  if (businessName) {
    topoDialog.value.show(businessName)
  }
}
</script>
